<template>
    <el-dropdown class=" g-flex-align-cross-center" @command="handleUserinfoCommand"
                 v-loading="userinfoLoading"
                 element-loading-spinner="el-icon-loading">
        <div class="g-pointer g-height100 g-flex-align-cross-center  g-color-fff"  style="padding: 0 5px;">
            <el-avatar icon="el-icon-user-solid" :src="avatar"></el-avatar>
            <span style="margin-left: 5px;"> {{nickname}}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item  command="updatePwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="updateAvatar">修改头像</el-dropdown-item>
            <el-dropdown-item command="userinfoEdit">修改信息</el-dropdown-item>
            <el-dropdown-item divided  command="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
        <FileUploadDialog ref="avatoruploaddialog" title="头像上传"
                          :submit-button-loading="submitButtonLoading"
                          :value="avatar"
                          accept="image/*"
                          :show-file-list="false"
                          :on-success-callback="avatarUploadSuccess"></FileUploadDialog>
    </el-dropdown>
</template>

<script>
    import FileUploadDialog from '../../../../common-util/src/components/upload/FileUploadDialog.vue'

    import StorageTools from '../../../../common-util/src/tools/StorageTools'
    export default {
        components: {
            FileUploadDialog
        },
        props:{
            userinfoLoading:{
                type:Boolean,
                default: false
            },
            currentUserinfo:{
                type:Object,
                default: null
            }
        },
        computed: {
            nickname(){
                let r = ''
                if(this.currentUserinfo && this.currentUserinfo.user){
                    r = this.currentUserinfo.user.nickname
                }
                return r
            },
            avatar(){
                let r = ''
                if(this.currentUserinfo && this.currentUserinfo.user){
                    r = this.currentUserinfo.user.avatar
                }
                return r
            }
        },
        data (){
            return {
                submitButtonLoading: false
            }
        },
        mounted(){
        },
        methods:{
            handleUserinfoCommand(command){
                switch (command) {
                    case 'userinfo':{

                        this.$router.push('/base/user/userinfo/current')
                        break
                    }
                    case 'updatePwd':{

                        this.$router.push('/base/user/updatePwd')
                        break
                    }
                    case 'updateAvatar':{
                        this.$refs.avatoruploaddialog.show()
                        break
                    }
                    case 'userinfoEdit':{
                        this.$router.push('/base/user/userinfoEdit/current')
                        break
                    }
                    case 'logout':{
                        // jwt退出不需要调用接口，废弃token就可以了
                        StorageTools.sessionClear()
                        if (window.mfe) {
                            // 该事件是在portal项目app.vue中监听
                            this.$bus.$emit('toLogin')
                        }else {
                            // 如果不是向前端
                            this.$router.replace('/login')
                        }
                        break
                    }
                }
            },
            //responseData, file, fileList
            avatarUploadSuccess(responseData, file, fileList){
                this.submitButtonLoading = true
                this.axios.put(this.$baseURL.base +  '/base/user/userinfo/current/avatar',{
                    avatar:responseData.url
                }).then((res)=>{
                    //window.mfe_vue_bus.$emit('refreshUserInfo')
                    this.$bus.$emit('userinfoEdit',res.data)

                    this.$refs.avatoruploaddialog.hide()
                }).finally(()=>{
                    this.submitButtonLoading = false
                })

            }
        },
        watch: {
        }
    }
</script>

<style scoped>

</style>